﻿<!DOCTYPE html>
<html lang="zxx">
   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- Title -->
      <title>Alum - Responsive HTML Site Template</title>
      <!-- Favicon -->
      
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="../blogfont/assets/css/bootstrap.min.css">
      <!--Responsive Menu  CSS -->
      <link rel="stylesheet" href="../blogfont/assets/css/responsive-menu.css" />
      <!-- lightbox CSS -->
      <link rel="stylesheet" href="../blogfont/assets/css/lightbox.min.css">
      <!-- Prism CSS -->
      <link rel="stylesheet" href="../blogfont/assets/css/prism.css">
      <!-- Owl carousel CSS -->
      <link rel="stylesheet" href="../blogfont/assets/css/owl.carousel.min.css">
      <!-- Font awesome CSS -->
      <link rel="stylesheet" href="../blogfont/assets/css/fontawesome-all.min.css">
      <!-- Aos CSS -->
      <link rel="stylesheet" href="../blogfont/assets/css/aos.css">
      <!-- Main CSS -->
      <link rel="stylesheet" href="../blogfont/assets/css/style.css">
      <!-- Google font -->
      <link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600,700" rel="stylesheet">
   </head>
   <body>
      <!-- ==================== PRELOADER HERE ===================================== -->
      <div class="overlay-loader">
         <img src="../blogfont/assets/images/805.gif" alt="loader" />
      </div>
      <!-- ==================== PRELOADER END ===================================== -->
      <!-- ======================== START HEADER AREA HERE ====================================== -->
      <header class="themeix-header  clearfix">
         <div class="themeix-header-navigation bg-color">
            <div class="container">
               <div class="row">
                  <div class="col-md-12">
                     <div class="themeix-navbar">
                        <div class="themeix-logo float-left">
                           <a class="themeix-brand" href="index.html"><img src="../blogfont/assets/images/logo.png" alt="Header Logo"></a>
                        </div>
                        <div class="header-container highlight">
                             <nav class="themeix-menu float-right">
                              <ul id="navigation-menu" class="slimmenu">
                                 <li class="has-submenu">
                                    <a href="index.html">Home</a>
                                    <ul>
                                       <li><a href="index.html">Home 1</a></li>
                                       <li><a href="index2.html">Home 2</a></li>
                                    </ul>
                                 </li>
                                 <li><a href="about.html">About</a></li>
                                 <li class="has-submenu">
                                    <a href="#">Page</a>
                                    <ul>
                                       <li><a href="author.html">Author</a></li>
                                       <li><a href="authors.html">Authors</a></li>
                                       <li><a href="tag.html">Tag</a></li>
                                       <li><a href="tags.html">Tags</a></li>
                                       <li><a href="404.html">404 Page</a> </li>
                                    </ul>
                                 </li>
                                 <li><a href="guide.html">Style Guide</a></li>
                                 <li><a href="contact.html">Contact</a></li>
                              </ul>
                              <div class="navigation-sidebar">
							      <img src="../blogfont/assets/images/search-img.png" alt="search-img" class="search-img" id="search-btn" />
							      <button class="openbtn" onclick="openNav()"><img src="../blogfont/assets/images/menu-icon.png" alt="menu-icon" /></button>
							  </div>
                           </nav>
						    <div id="search-overlay" class="block">
                                 <div class="centered">
                                    <div id="search-box">
                                       <i id="close-btn" class="fa fa-times fa-2x"></i>
                                       <form action="/search" id="search-form" method="get" target="_top">
                                          <div class="input-group">
                                             <input id="search-text" name="q" placeholder="Search Here" type="text" />
                                             <div class="input-group-prepend">
                                                <button id="search-button" type="submit">
                                                <span><i class="fa fa-search"></i></span>
                                                </button>
                                             </div>
                                          </div>
                                       </form>
                                    </div>
                                 </div>
                              </div>
                           <div id="mySidepanel" class="sidepanel">
                              <ul class="list-inline pt-4">
                                 <li><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a></li>
                                 <li><a href="#">Adverting</a></li>
                                 <li><a href="#">Privacy Policy</a></li>
                                 <li><a href="#">Terms of Service</a></li>
                                 <li><a href="#">FAQ</a></li>
                            
                              </ul>
                           </div>
                           
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="header-bottom page-title">
            <div class="container">
               <div class="row">
                  <div class="col-md-9 mx-auto">
                     <div class="header-text text-center">
                        <h1 class="heading-1 mb-4">Style Guide</h1>
                        <p>Bibendum litora a risus, nibh orci. Condimentum facilisis amet, lacus a id et urna orci. Eros abitur aptent, molestie ligula sit amet in. Feugilputate, dolor eget massa consec</p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="header-shape">
            <img class="shape1" src="../blogfont/assets/images/Shape_01.png" alt="shape animated"/>
            <img class="shape2" src="../blogfont/assets/images/Shape_02.png" alt="shape animated"/>
            <img class="shape3" src="../blogfont/assets/images/Shape_03.png" alt="shape animated"/>
         </div>
      </header>
      <!-- =================== START MAIN CONTENT AREA HERE ========================-->
      <main class="main-content-area section-padding-bottom">
         <div class="container">
            <div class="row">
               <div class="col-md-10 mx-auto nagative-margin pb-0">
                  <div class="entry-content">
                     <h2>Simple default styles for headings</h2>
                     <p>Richard McClintock, a Latin <a href="#">scholar from Hampden</a>-Sydney College, is credited with discovering the source behind the ubiquitous filler text. In seeing a sample of lorem ipsum, his interest was piqued by consectetur—a genuine, albeit rare, Latin word. Consulting a Latin dictionary led McClintock to a passage from De a <a href="#">Finibus Bonorum</a>et Malorum (“On the Extremes of Good and Evil”), a first-century B.C. text from the Roman philosopher Cicero.</p>
                     <h4 class="heading-4 mb-3">Unorder List</h4>
                     <ul>
                        <li>Dapibus neque ultrices turpis</li>
                        <li>Suscipit hymenaeos maecenas</li>
                        <li>Suscipit hymenaeos maecenas</li>
                        <li>Suscipit hymenaeos maecenas</li>
                     </ul>
                     <h4 class="heading-4 mb-3">Order List</h4>
                     <ol>
                        <li>Dapibus neque ultrices turpis</li>
                        <li>Suscipit hymenaeos maecenas</li>
                        <li>Suscipit hymenaeos maecenas</li>
                        <li>Suscipit hymenaeos maecenas</li>
                     </ol>
                     <h4 class="heading-4 mb-3">Hyper-Link</h4>
                     <p>Richard McClintock, a Latin <a href="#">scholar from Hampden</a>-Sydney College, is credited with discovering the source behind the ubiquitous filler text. In seeing a sample of lorem ipsum, his interest was piqued by consectetur—a genuine, albeit rare, Latin word. Consulting a Latin dictionary led McClintock to a passage from De a <a href="#">Finibus Bonorum</a>et Malorum (“On the Extremes of Good and Evil”), a first-century B.C. text from the Roman philosopher Cicero.</p>
                     <blockquote>
                        <p>Blog dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incut labore The purpose of lorem ipsum is to create a natural looking block of text (sentence graph, page, etc.) that doesn't distract from the layout. A practice</p>
                     </blockquote>
                     <h4 class="heading-4 mb-3">Image</h4>
                  </div>
                  <figure class="image-medium">
                     <img src="../blogfont/assets/images/08_Style_Guide.jpg" alt="" />
                     <figcaption class="text-center">GResponsive & Medium Style Image</figcaption>
                  </figure>
                  <figure class="galery-image d-flex align-items-stretch">
                     <div><a href="../blogfont/assets/images/img-1.jpg" data-lightbox="gallery-popup"><img src="../blogfont/assets/images/img-1.jpg" alt="" /></a></div>
                     <div><a href="../blogfont/assets/images/img-2.jpg" data-lightbox="gallery-popup"><img src="../blogfont/assets/images/img-2.jpg" alt="" /></a></div>
                  </figure>
                  <figure class="galery-image d-flex align-items-stretch">
                     <div><a href="../blogfont/assets/images/img-3.jpg" data-lightbox="gallery-popup"><img src="../blogfont/assets/images/img-3.jpg" alt="" /></a></div>
                     <div><a href="../blogfont/assets/images/img-4.jpg" data-lightbox="gallery-popup"><img src="../blogfont/assets/images/img-4.jpg" alt="" /></a></div>
                  </figure>
                  <figure class="image-wide">
                     <img src="../blogfont/assets/images/wide-img.jpg" alt="" />
                     <figcaption class="text-center">Wide Image</figcaption>
                  </figure>
				  <figure class="fluid-image">
					  <img src="../blogfont/assets/images/fluid-image.jpg" alt="eofe"/>
					  <figcaption class="text-center">Full Width Image</figcaption>
				   </figure>
                  <pre class=" language-javascript mb-3"><code class=" language-javascript"><span class="token punctuation">{</span>
	<span class="token string">'latex-equation'</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
		pattern<span class="token punctuation">:</span> <span class="token regex">/\$(\\?.)*?\$/g</span><span class="token punctuation">,</span>
		alias<span class="token punctuation">:</span> <span class="token string">'string'</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
                  <h4 class="heading-4 mb-3">Youtube Video</h4>
				  <div class="videoWrapper mb-3">
              <!--https://www.youtube.com/embed/lg4BtCwFyVM-->
				     <iframe src="" allow="autoplay; encrypted-media" width="315" height="315"></iframe>
				  </div>
                  <h4 class="heading-4 mb-3">Sound Cloud</h4>
                   <!--https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/512883342&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true-->
                  <iframe allow="autoplay" width="400" src=""></iframe>
               </div>
            </div>
         </div>
      </main>
      <!-- ======================== END MAIN CONTENT AREA HERE ========================-->
      <!-- ==================== START FOOTER AREA ===================================== -->
      <footer>
         <div class="footer-area clearfix ">
            <div class="container">
               <div class="row">
                  <div class="col-lg-6">
                     <div class="row">
                        <div class="col-sm-6">
                           <div class="footer-widget">
                              <div class="footer-logo-img pb-3">
								<a href="index.html"><img src="../blogfont/assets/images/footer-logo.png" alt="footer-logo" /></a>
							  </div>
                              <div class="widget-details">
                                 <p>Mauris at varius orci. Vestibulum interdum felis eu nisl pulvinar, quis nibh.d ultricies ante vitae
                                 </p>
                                 <div class="social-icon">
                                    <ul class="list-inline">
                                       <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                       <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                       <li><a href="#"><i class="fa fa-rss"></i></a></li>
                                       <li><a href="#"><i class="fa fa-skype"></i></a></li>
                                    </ul>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="offset-lg-1 col-lg-5 col-sm-6">
                           <div class="footer-widget">
                              <div class="widget-title">
                                 <h3>Useful Link
                                 </h3>
                              </div>
                              <div class="widget-details">
                                 <div class="widget-link">
                                    <ul>
                                       <li><a href="authors.html">Authors</a></li>
                                       <li><a href="contact.html">Contact Us</a></li>
                                       <li><a href="about.html">About Us</a></li>
                                       <li><a href="guide.html">Style Guides</a></li>
                                    </ul>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="col-lg-6">
                     <div class="row">
                        <div class="offset-lg-1 col-lg-5 col-sm-6">
                           <div class="footer-widget">
                              <div class="widget-title">
                                 <h3>Tags Cloud
                                 </h3>
                              </div>
                              <div class="widget-details  footer-tags">
                                 <ul>
                                    <li><a href="tag.html">Travel</a>,</li>
                                    <li><a href="tag.html">Clean</a>,</li>
                                    <li><a href="tag.html">Web</a>,</li>
                                    <li><a href="tag.html">Design</a>,</li>
                                    <li><a href="tag.html">Html</a>,</li>
                                    <li><a href="tag.html">Video</a>,</li>
                                    <li><a href="tag.html">History</a></li>
                                 </ul>
                              </div>
                           </div>
                        </div>
                        <div class="col-lg-6  col-sm-6">
                           <div class="footer-widget m-0">
                              <div class="widget-title">
                                 <h3>Subscribe Us</h3>
                              </div>
                              <div class="widget-details">
                                 <form action="#">
                                    <input type="email" placeholder="Email Adress" />
                                    <button type="submit">Subscribe</button>
                                 </form>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="row">
                  <div class="col">
                     <div class="footer-bottom text-center">
                        <p>Copyright - Alum 2019 Designed by <a href="http://bootstrapmb.com">Themeix</a></p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </footer>
      <!-- ==================== END FOOTER AREA HERE ===================================== -->
      <!-- ====================ALL JS FILE HERE===================================== -->
      <!-- jQuery -->
      <script src="../blogfont/assets/js/jquery-3.3.1.min.js"></script>
      <!-- Bootstrap JS -->
      <script src="../blogfont/assets/js/bootstrap.min.js"></script>
      <!-- responsive-menu. -->
      <script src="../blogfont/assets/js/responsive-menu.js"></script>
      <!-- scrollUp  JS -->
      <script src="../blogfont/assets/js/jquery.scrollUp.min.js"></script>
      <!-- lightbox js -->
      <script src="../blogfont/assets/js/lightbox.min.js"></script>
      <!-- carousel js -->
      <script src="../blogfont/assets/js/owl.carousel.min.js"></script>
      <!-- Prism JS -->
      <script src="../blogfont/assets/js/prism.js"></script>
      <!-- wow JS -->
      <script src="../blogfont/assets/js/aos.min.js"></script>
      <!-- main  JS -->
      <script src="../blogfont/assets/js/main.js"></script>
   </body>
</html>
